<template>
<div class="top-operation-three">
    <el-button type="back" v-if="hasBack" class="el-icon-arrow-left" @click="GoBack">返回</el-button>
    <div class="right">
        <span>当前位置：</span>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(item,index) in Breadcrumb" :key="index" :to="{ name: item.link }">{{item.name}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {};
    },
    props: {
        Breadcrumb:{
            type:Array,
            default: () => {
                return []
            }
        },
        hasBack:{
            type:Boolean,
            default:true
        }
    },
    methods: {
        GoBack() {
            this.$router.go(-1);
        },
    },
};
</script>

<style lang="less" scoped>
.top-operation-three {
    height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // background-color: #FAFAFA;
    margin-bottom: 20px;

    /deep/.el-button--back {
        width: 70px;
        height: 36px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(221, 221, 221, 1);
        padding: 0;
        color: #333333;
        font-size: 14px;
    }

    .right {
        display: flex;
        align-items: center;
    }

    /deep/.is-link {
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
    }

    /deep/.is-link:hover {
        color: #3d7fff;
    }

    // /deep/.el-breadcrumb .el-breadcrumb__item:last-child {
    //   .is-link :hover{
    //     color: red !important;
    //   }
    // }
}
</style>
